From 2ac499695aa89b68863c0e34c6237a833ec0e03b Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 29 Oct 2023 21:21:10 -0700
Subject: feat(badges): websocket loading

---
 src/routes/user/[user]/badges/+page.server.ts |  8 +-----
 src/routes/user/[user]/badges/+page.svelte    | 37 +++++++++++++++++++--------
 2 files changed, 27 insertions(+), 18 deletions(-)

(limited to 'src/routes/user/[user]/badges')

diff --git a/src/routes/user/[user]/badges/+page.server.ts b/src/routes/user/[user]/badges/+page.server.ts
index 4be5bcd2..f18892a7 100644
--- a/src/routes/user/[user]/badges/+page.server.ts
+++ b/src/routes/user/[user]/badges/+page.server.ts
@@ -1,11 +1,5 @@
-import { user } from '$lib/AniList/user.js';
-import { getUserBadges } from '$lib/userBadgesDatabase.js';
-
 export const load = async ({ params }) => {
-	const badges = getUserBadges((await user(params.user)).id);
-
 	return {
-		username: params.user,
-		badges
+		username: params.user
 	};
 };
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index fb5f5e29..dbf8d21c 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -2,16 +2,25 @@
 	import { userIdentity } from '$lib/AniList/identity.js';
 	import type { Badge } from '$lib/userBadgesDatabase.js';
 	import { onMount } from 'svelte';
+	import { io } from 'socket.io-client';
 
 	export let data;
 
 	let editMode = false;
 	let currentUserIdentity: ReturnType<typeof userIdentity>;
 	let error: null | string;
+	const socket = io();
+	let badges: Badge[] | null = null;
 
 	onMount(async () => {
+		socket.on('badges', (message) => {
+			badges = message;
+		});
+
 		if (data.user) {
 			currentUserIdentity = userIdentity(data.user);
+
+			socket.emit('badges', data.user);
 		} else {
 			currentUserIdentity = new Promise((resolve) =>
 				resolve({
@@ -108,17 +117,23 @@
 	{/if}
 
 	<div id="badges">
-		{#each data.badges as badge}
-			{#if editMode}
-				<a href={`#`} on:click={() => removeBadge(badge)} id={`badge-${badge.id}`}>
-					<img src={badge.image} alt={badge.description} />
-				</a>
-			{:else}
-				<a href={badge.post} target="_blank" id={`badge-${badge.id}`}>
-					<img src={badge.image} alt={badge.description} />
-				</a>
-			{/if}
-		{/each}
+		{#if badges === null}
+			<p>Loading&nbsp;...</p>
+		{:else if badges.length === 0}
+			No badges found for this user.
+		{:else}
+			{#each badges as badge}
+				{#if editMode}
+					<a href={`#`} on:click={() => removeBadge(badge)} id={`badge-${badge.id}`}>
+						<img src={badge.image} alt={badge.description} />
+					</a>
+				{:else}
+					<a href={badge.post} target="_blank" id={`badge-${badge.id}`}>
+						<img src={badge.image} alt={badge.description} />
+					</a>
+				{/if}
+			{/each}
+		{/if}
 	</div>
 {/await}
 
-- 
cgit v1.2.3